<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				// var box = document.getElementById('box');

				document.onkeydown = function(event) {
					event = event || window.event;
					var a = 10;

					switch (event.keyCode) {
						case 65:
							box.style.left = box.offsetLeft - a + "px";
							break;
						case 68:
							box.style.left = box.offsetLeft + a + "px";
							break;
						case 87:
							box.style.top = box.offsetTop - a + "px";
							break;
						case 83:
							box.style.top = box.offsetTop + a + "px";
							break;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box" class="bx"></div>
	</body>
</html>
